<template>
	<view>
		<view class="outer">
			<view class="inner">
				<view class="battery" :style="{'--color': colors}">
					<view class="power" :style="{width:num+'rpx',backgroundColor:colors}"></view>
				</view>
			</view>
			<text v-if='isElectric' class="leftText" :style="{color:colors}">{{ElectricQuantity}}%</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "electric-quantity",
		props: {
			ElectricQuantity: {
				type: Number,
				default: 100
			},
			isElectric: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				colors: this.colorbg(),
				num: this.ElectricQuantity / 1.4
			};
		},
		methods: {
			colorbg() {
				if (this.ElectricQuantity > 20) {
					return '#1D78F7 '
				} else {
					return '#ff3434'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.outer {
		display: table;
		height: 100%;
		width: 100%;
	}

	.leftText {
		margin-left: 12rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.inner {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

	.battery {
		position: relative;
		display: inline-block;
		height: 24rpx;
		width: 44rpx;
		background: #1D78F7;
		// border: 2rpx solid transparent;
		border-radius: 10rpx;
		
	}

	.battery:before {
		content: "";
		position: absolute;
		background-color: #FFFFFF;
		border: 2rpx solid var(--color);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 5rpx;
	}

	.battery:after {
		content: "";
		position: absolute;
		top: calc(50% - 6rpx);
		right: -4rpx;
		height: 10rpx;
		width: 4rpx;
		border-radius: 0 2rpx 2rpx 0;
		background-color: var(--color);
	}

	.power {
		background-color: white;
		display: block;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
		bottom: 4rpx;
		right: 4rpx;
		border-radius: 5rpx;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
		transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95);
		transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95), -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
	}
</style>
